<template>
  <div class="Details1">
    <NavBar fixed placeholder title="应急演练" z-index="999" ref="nav">
      <template #left>
        <Icon
          name="arrow-left"
          size="0.53rem"
          color="#000"
          @click="$router.back()"
        />
      </template>
    </NavBar>
    <div style="position: relative">
      <img class="bg-img" src="../../../assets/img/card.png" alt="" />
      <!-- <img class="bg-img2" src="../../../assets/img/deal.png" alt="" /> -->
      <div class="header">
        <div class="state">演练记录</div>
        <div class="id">记录编号：{{ info.edrId }}</div>
      </div>
      <div class="main">
        <div class="card">
          <Cell title="应急名称" :value="info.edrName"></Cell>
          <Cell title="计划类型" :value="info.edrType"></Cell>
          <Cell title="演练计划" :value="info.edpName"></Cell>
          <Cell title="演练地点" :value="info.area"></Cell>
          <Cell title="组织部门" :value="info.dutyDepart"></Cell>
          <Cell title="总指挥" :value="info.dutyUser"></Cell>
          <Cell title="演练开始时间" :value="editTime(info.actualStart)"></Cell>
          <Cell title="演练结束时间" :value="editTime(info.actualEnd)"></Cell>
          <div class="Abstract">演练总结</div>
          <textarea
            v-model="info.remark"
            cols="30"
            rows="10"
            readonly
          ></textarea>
          <div v-if="info.pic.length > 0">
            <p class="phone-text">演练照片</p>
            <VanImage
              v-for="(item, i) in info.pic"
              :key="i"
              :src="/nhw/ + item"
              width="150"
              height="150"
              class="images"
            >
            </VanImage>
          </div>
        </div>
      </div>
      <!-- <div class="drag" @click="toJump">
      <Icon name="todo-list-o" size="40"></Icon>
      <span>查看流程</span>
    </div> -->
      <!-- <SideBtn :to="{ name: 'SnapshotSteps' }" /> -->
    </div>
  </div>
</template>

<script>
import { EmergencyDrillDetails } from "@/api/work";
import SideBtn from "components/SideBtn";
import {
  Image as VanImage,
  Uploader,
  Popup,
  NavBar,
  Icon,
  Field,
  Cell,
  List,
  Button,
} from "vant";
export default {
  props: {},
  data() {
    return {
      name: "1",
      location: "2",
      describe: "3",
      user: "4",
      phone: "5",
      info: {},
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getInfo();
  },
  watch: {},
  methods: {
    async getInfo() {
      const { param } = await EmergencyDrillDetails({
        edrNo: this.$route.query.edrNo,
        orgNo: localStorage.getItem("orgNo"),
      });
      console.log(param.data);

      this.info = param.data;
    },
    editTime(time) {
      return time.substr(0, time.length - 2, time.length - 1);
    },
    toJump() {
      this.$router.push("SnapshotSteps");
    },
  },
  components: {
    SideBtn,
    VanImage,
    Uploader,
    Button,
    Popup,
    NavBar,
    Icon,
    Field,
    Cell,
    List,
  },
};
</script>

<style scoped lang="less">
.Details1 {
  background-color: #f8f8f8;
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  background-color: #f7f7f9;
  // /deep/.van-nav-bar__content {
  //   background-color: #3982f6;

  //   .van-nav-bar__title {
  //     color: #fff;
  //   }
  // }
  .bg-img {
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .bg-img2 {
    z-index: 99;
    width: 200px;
    height: 200px;
    position: absolute;
    right: 24px;
    top: 150px;
  }
  .header {
    width: 100%;
    height: 190px;
    // background-color: red;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding-left: 20px;
    color: #edf0f5;

    .state {
      font-size: 48px;
      z-index: 99;
    }
    .id {
      font-size: 26px;
      z-index: 99;
    }
  }
  .main {
    padding: 0 15px;
    .card {
      width: 100%;
      overflow: hidden;
      background-color: #fff;
      padding-bottom: 30px;

      .Abstract {
        font-size: 26px;
        padding-left: 28px;
      }
      textarea {
        width: 90%;
        height: 157px;
        margin: 10px 0;
        margin-left: 50%;
        padding: 15px;
        transform: translate(-50%);
        border: 1px solid #dddddd;
        font-size: 26px;
        border-radius: 6px;
      }
    }
  }
  .phone-text {
    font-size: 28px;
    padding: 20px;
    padding-left: 30px;
  }
  .images {
    margin-left: 25px;
  }
  .drag {
    position: fixed;
    bottom: 200px;
    right: 20px;
    padding: 10px;
    border-radius: 12px;
    background: #c6a86f;
    color: #fff;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      margin-left: 7px;
    }
  }
}
</style>
